<template>
  <t-watermark
    isRepeat
    removable
    :watermark-content="{ text: '仅作学习交流仿写网站' }"
    :y="120"
    :x="80"
    :width="120"
    :height="60"
  >
    <header style="width: 100%; display: flex; flex-direction: column">
      <ul>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">京州市公安局</a></li>
        <li><a href="#">交通警察支队</a></li>
        <img src="../image/bange.jpg" alt="police" style="height: 80px" />
        <li><a href="#">汉东省人民政府</a></li>
        <li><a href="#">举报违法犯罪</a></li>
        <li><a href="#">加入我们</a></li>
      </ul>
      <div class="police">
        <h1>汉东省公安厅</h1>
      </div>
    </header>

    <main>
      <div class="swipe">
        <t-swiper
          class="tdesign-demo-block--swiper"
          animation="fade"
          :height="600"
        >
          <t-swiper-item v-for="item in images" :key="item">
            <img :src="item" class="demop-item" />
          </t-swiper-item>
        </t-swiper>
      </div>
      <div style="width: 80%; margin: 0 auto">
        <el-row :gutter="0">
          <el-col :span="12">
            <div
              class="bg"
              style="background: linear-gradient(to left, #012b81 93%, #ffffff)"
            >
              <h2>市政要闻</h2>
            </div>
            <a href="#">
              <div class="list-item" v-for="(item, index) in news" :key="index">
                <div class="item-li">{{ item.title }}</div>
              </div>
            </a>
          </el-col>
          <el-col :span="6">
            <div class="bg">
              <h2>国务院通知</h2>
            </div>
            <div class="list-item" v-for="(item, index) in gwytz" :key="index">
              <div class="item-li">{{ item.title }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div
              class="bg"
              style="
                background: linear-gradient(to right, #012b81 93%, #ffffff);
              "
            >
              <h2>公安厅资讯</h2>
            </div>
            <div class="list-item" v-for="(item, index) in gatzx" :key="index">
              <div class="item-li">{{ item.title }}</div>
            </div>
          </el-col>
        </el-row>
        <img
          src="https://s11.ax1x.com/2024/02/05/pFljPjf.jpg"
          alt="dflz"
          style="width: 100%; margin-top: 20px"
        />
        <el-row>
          <el-col :span="6">
            <img
              src="https://s11.ax1x.com/2024/02/05/pF1Skzn.png"
              alt=""
              style="width: 100%"
            />
          </el-col>
          <el-col :span="6">
            <img
              src="https://s11.ax1x.com/2024/02/05/pF1SEMq.png"
              alt=""
              style="width: 100%"
            />
          </el-col>
          <el-col :span="6">
            <img
              src="https://s11.ax1x.com/2024/02/05/pF1SZLV.jpg"
              alt=""
              style="width: 100%; height: 43.5px"
            />
          </el-col>
          <el-col :span="6">
            <img
              src="https://s11.ax1x.com/2024/02/05/pF1SVs0.jpg"
              alt=""
              style="width: 100%; height: 43.5px"
            />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <t-swiper
              class="tdesign-demo-block--swiper"
              :duration="300"
              :interval="2000"
            >
              <t-swiper-item v-for="item in nimages" :key="item">
                <img :src="item" style="height: 300px; width: 100%" />
              </t-swiper-item>
            </t-swiper>
          </el-col>
          <el-col :span="7">
            <div class="title"><h1>警务动态</h1></div>
            <div class="list-item" v-for="(item, index) in gatzx" :key="index">
              <div class="item-li">{{ item.title }}</div>
            </div></el-col
          >
          <el-col :span="7">
            <div class="title1"><h1>警务公开</h1></div>
            <div class="list-item" v-for="(item, index) in jwgk" :key="index">
              <div class="item-li">{{ item.title }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </main>
    <footer>
      <text style="text-align: center">
        汉东省公安厅主办 &copy;版权所有 技术支持：溜溜号卡科技
        汉ICP备0000001号-1<br />
        <img src="../image/beian.png" />汉公安网备0000001号
        <br />
        地址：汉东省京州市光明区启发路52号 邮编：950111
        刑事犯罪举报：0321-2545771
        <br />
        报警、求助请拨：110 举报、投诉、建议请拨：12389
      </text>
    </footer>
  </t-watermark>
</template>

<style>
* {
  margin: 0;
  font-family: "Microsoft YaHei UI";
}

a {
  text-decoration: none;
  color: black;
}

h1 {
  color: white;
  margin: auto;
  font-family: "楷体";
  font-weight: 1000;
}

h2 {
  color: white;
  font-family: "楷体";
}

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
}

header ul li {
  float: left;
  height: 100%;
}

header ul li a:hover {
  background-color: #012b81;
  color: #ffffff;
  height: 100%;
}

header ul li a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  color: black;
  font-size: 25px;
  font-family: "楷体";
  font-weight: 600;
}

.bg {
  background-color: #012b81;
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.police {
  background-color: #012b81;
  line-height: 50px;
  text-align: center;
}

.swipe {
  background: linear-gradient(to bottom, #012b81, #ffffff);
}

.demop-item {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.list-item > .item-li {
  font-family: "宋体";
  font-weight: 600;
  font-size: 20px;
  margin-top: 15px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.list-item > .item-li:hover {
  background-color: #012b81;
  color: #ffffff;
}

.title {
  height: 50px;
  background-color: #012b81;
  /* background: linear-gradient(to right, #012b81 80%, #ffffff); */
  display: flex;
}

.title1 {
  height: 50px;
  background: linear-gradient(to right, #012b81 90%, #ffffff);
  display: flex;
}

footer {
  background-color: #e7e7e7;
  padding: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from "./components/HelloWorld.vue";
let images = [
  "https://s11.ax1x.com/2024/02/05/pFlWk0f.webp",
  "https://s11.ax1x.com/2024/02/05/pFlbiGV.jpg",
  "https://s11.ax1x.com/2024/02/05/pFlbMPx.png",
];
let nimages = [
  "https://s11.ax1x.com/2024/02/07/pF1fVmt.jpg",
  "https://s11.ax1x.com/2024/02/07/pF1fAOI.jpg",
  "https://s11.ax1x.com/2024/02/07/pF1fk6A.jpg",
];
let news = [
  //市政要问
  { id: 1, title: "汉东省人民政府任命祁同伟同志为汉东省副省长" },
  { id: 2, title: "山水集团入选汉东省十大优秀企业榜首" },
  { id: 3, title: "沉痛悼念陈岩石同志离世" },
  { id: 4, title: "汉东省人民政府任命高育良同志为汉东省省委书记" },
  { id: 5, title: "汉东省人民政府任命李达康同志为汉东省政法委书记" },
];
let gwytz = [
  //国务院通知
  { id: 1, title: "国务院关于《甘肃省国土空间规划（2021—2035年）》的批复" },
  { id: 2, title: "国务院关于经营者集中申报标准的规定" },
  { id: 3, title: "中华人民共和国档案法实施条例" },
  { id: 4, title: "国务院关于《云南省国土空间规划（2021—2035年）》的批复" },
  { id: 5, title: "国务院关于《四川省国土空间规划（2021—2035年）》的批复" },
];
let gatzx = [
  //公安厅资讯
  {
    id: 1,
    title:
      "国新办举行营造市场化、法治化、国际化一流营商环境 国务院政策例行吹风会",
  },
  { id: 2, title: "汉东省公安厅举行2024年中国人民警察节升旗仪式" },
  { id: 3, title: "光明区公安局警方强化元旦假期各项安保工作确保群众安心过节" },
  { id: 4, title: "京州警方全力护航平安春运" },
  { id: 5, title: "新型警务模式助力擦亮汉东公安法治“金名片”" },
];

let jwgk = [
  //警务公开
  { id: 1, title: "2024年京州市公安局工作要点" },
  { id: 2, title: "京州市公安局政务公开工作要点实施方案" },
  { id: 3, title: "关于印发京州市公安局2020年政务公开工作要点分工方案的通知" },
  { id: 4, title: "关于整顿警务体系政法工作的同志" },
  { id: 5, title: "京州市公安机关应对疫情服务经济社会发展20条措施" },
];
</script>
